.checkbox {
  &__group {
    text-align: left;
  }

  &__item {
    user-select: none;
    cursor: default;
    padding-top: var(--spacing-eighth-unit);
    padding-bottom: var(--spacing-eighth-unit);
    &--vertical {
      display: block;
      clear: both;
    }
  }
  &__box {
    $size: 18px;
    height: $size;
    width: $size;
    border: var(--border-default);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    position: relative;
    &:hover {
      background: var(--color-background-light);
    }
    &--checked {
      border: var(--border-accent-shade);
      background: var(--color-accent);
      &:hover {
        background: var(--color-accent-shade);
      }

      & + .checkbox__label {
        color: var(--color-text-active);
      }
    }
  }
  &__check {
    color: var(--color-text-base);
    font-size: var(--spacing-half-unit);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      @include drop-shadow--dark-ui;
      path {
        fill: var(--color-white);
      }
    }
  }
  &__label {
    padding-left: var(--spacing-quarter-unit);
    font-size: var(--font-size-base);
    color: var(--color-text-base);
    display: inline-block;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
  }
}
